<template>
  <div class="admin-container">
    <el-tabs v-model="activeTab">
      <el-tab-pane label="用户管理" name="users">
        <el-table :data="users" style="width: 100%">
          <el-table-column prop="id" label="ID" width="80" />
          <el-table-column prop="username" label="用户名" />
          <el-table-column prop="email" label="邮箱" />
          <el-table-column prop="is_admin" label="管理员">
            <template #default="scope">
              {{ scope.row.is_admin ? '是' : '否' }}
            </template>
          </el-table-column>
          <el-table-column prop="created_at" label="创建时间" />
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="步态数据" name="gait">
        <el-table :data="gaitData" style="width: 100%">
          <el-table-column prop="id" label="ID" width="80" />
          <el-table-column prop="username" label="用户名" />
          <el-table-column prop="task_id" label="任务ID" />
          <el-table-column prop="stride_length" label="步幅" />
          <el-table-column prop="step_height" label="步高" />
          <el-table-column prop="time_interval" label="时间间隔" />
          <el-table-column prop="point_count" label="点数" />
          <el-table-column prop="result" label="结果" />
          <el-table-column prop="created_at" label="创建时间" />
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="文件数据" name="files">
        <el-table :data="fileData" style="width: 100%">
          <el-table-column prop="id" label="ID" width="80" />
          <el-table-column prop="username" label="用户名" />
          <el-table-column prop="log_content" label="日志内容" show-overflow-tooltip />
          <el-table-column prop="data_content" label="数据内容" show-overflow-tooltip />
          <el-table-column prop="created_at" label="创建时间" />
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import { getUsers, getGaitData, getFileData } from '@/api/admin'
import { ElMessage } from 'element-plus'

export default defineComponent({
  name: 'AdminDashboard',
  setup() {
    const activeTab = ref('users')
    const users = ref([])
    const gaitData = ref([])
    const fileData = ref([])

    const fetchData = async () => {
      try {
        const [usersRes, gaitRes, fileRes] = await Promise.all([
          getUsers(),
          getGaitData(),
          getFileData()
        ])
        users.value = usersRes.data
        gaitData.value = gaitRes.data
        fileData.value = fileRes.data
      } catch (error) {
        ElMessage.error('获取数据失败')
        console.error(error)
      }
    }

    onMounted(() => {
      fetchData()
    })

    return {
      activeTab,
      users,
      gaitData,
      fileData
    }
  }
})
</script>

<style scoped>
.admin-container {
  padding: 20px;
}
</style> 